<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('WeqKBDycZ2_VuqAmi538e')}}</p>
      <div class="operate-area">
        <!-- <div class="inline-item search-item">
          <Input v-model="stationName" @on-enter="searchTable">
            <span slot="prepend">{{$t('NNqwsiYKNFh8WR5Mvlwed')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div> -->
        <div class="inline-item btn-item">
          <Button type="primary" icon="md-add" @click="addStation"
            >{{$t('N8xdbBoV-d6Vc33tKrGGm')}}</Button
          >
        </div>
        <!-- <div class="inline-item btn-item">
          <Button type="primary" icon="ios-search" @click="userQuery"
            >{{$t('fcPvSAT-dLcX9XXKCC0zX')}}</Button
          >
        </div> -->
        <!-- <div class="inline-item btn-item">
          <Button type="primary" icon="ios-search" @click="periodElecQuery"
            >{{$t('2D1yqwiEDCvVHMVdfItrP')}}</Button
          >
        </div>
        <div class="inline-item btn-item">
          <Button type="primary" icon="ios-search" @click="pileQuery"
            >{{$t('pile_query')}}</Button
          >
        </div> -->
      </div>
      <Table
        highlight-row
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-current-change="selectionChangeHandler"
      ></Table>
      <!-- <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page> -->
    </Card>
    <Modal
      width="900"
      v-model="formModal"
      :title="(status === 'new' ? $t('N8xdbBoV-d6Vc33tKrGGm') : $t('3cH_U2GeBUW1V74W8oDNv')) + $t('WeqKBDycZ2_VuqAmi538e')"
      footer-hide
      :mask-closable="false"
    >
      <form-info
        :status="status"
        :data="formData"
        :rules="rules"
        @success="success"
        @fail="fail"
        @close="close"
        @open="open"
      />
    </Modal>
  </div>
</template>

<script>
import { getStationList, deleteStation } from '@/api/data2'
import FormInfo from './components/station_form_info'

export default {
  name: 'agent_station_manage',
  components: {
    FormInfo
  },
  data () {
    return {
      stationName: '',
      loading: false,
      formModal: false,
      status: 'new',
      formData: {
        name: '',
        address: '',
        consdate: '',
        tel: '',
        manager: '',
        scale: 0,
        remark: '',
        pictures: '',
        // type: '',
        // 经度
        lng: 0,
        // 维度
        lat: 0,
        profitsharing: 1,
        timezone: 0,
        country: ''
      },
      rules: {
        name: [{ required: true, message: this.$t('JxREaOcDxFufamZYsdylE'), trigger: 'blur' }],
        address: [{ required: true, message: this.$t('qU8dfGT2zgY9cUqV-gsj7'), trigger: 'blur' }],
        tel: [
          { required: true, message: this.$t('Q3g3e0FYXl82rXSrDl9RI'), trigger: 'blur' },
          {
            required: true,
            message: this.$t('90Cc1VMNr19_iHZ-lgqkY'),
            trigger: 'blur',
            validator: (rule, value) => {
              // return /(^1\d{6,10}$)|(^0\d{2,3}-\d{6,8}$)/.test(value)
              // 限定为数字，加减号，空格，逗号就可以了，不一定就一个号
              const reg = /[0-9,+\-\s]/
              const list = value.split('')
              let flag = true
              _.forEach(list, l => {
                flag = reg.test(l)
                return flag
              })
              return flag
            }
          }
        ],
        manager: [{ required: true, message: this.$t('wdNqZTWKyTovAO8paufzK'), trigger: 'blur' }],
        // type: [{ required: true, message: this.$t('Loyd0SHa0RG43suGirPOQ'), trigger: 'blur' }]
      },
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: this.$t('NNqwsiYKNFh8WR5Mvlwed'),
          key: 'name',
          width: 150
        },
        {
          title: this.$t('81K1V1IGGHxPb42EVYt1M'),
          key: 'address',
          width: 200
        },
        {
          title: this.$t('--tuVB53obv9ckJ342vmq'),
          key: 'consdate',
          width: 150
        },
        {
          title: this.$t('jE688EYtIT7-N6CXSWl5L'),
          key: 'tel',
          width: 150
        },
        {
          title: this.$t('Q58DQAm6oYtp3k-cvxlbn'),
          key: 'manager',
          width: 150
        },
        {
          title: this.$t('MV-P1vHjPXG7_m9z2N7Zk'),
          key: 'scale',
          width: 120
        },
        {
          title: this.$t('M7vkNhYw26IERuJmxNbK-'),
          key: 'country',
          width: 120
        },
        {
          title: this.$t('R50mHX0LambJk39x8cmq6'),
          key: 'remark',
          width: 200
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          width: 280,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                    icon: 'ios-person'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.queryItem(params.index)
                    }
                  }
                },
                this.$t('fcPvSAT-dLcX9XXKCC0zX')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'ios-trash'
                  },
                  on: {
                    click: () => {
                      this.deleteItem(params.index)
                    }
                  }
                },
                this.$t('hND4KLgCabT6swtTJBIUf')
              )
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      selections: []
    }
  },
  created () {
    this.queryTable()
  },
  methods: {
    queryItem (index) {
      const item = this.data[index]
      this.$router.push({
        name: 'login_user_manage_by_stationId',
        params: {
          stationId: item.id
        }
      })
    },
    userQuery () {
      if (this.selections.length > 0) {
        this.$router.push({
          name: 'station_user_query',
          params: {
            id: this.selections[0].id
          }
        })
      } else {
        this.$Message.warning(this.$t('8DDiBKFQZAxJ-r1n7sYoP'))
      }
    },
    stationQuery () {
      if (this.selections.length > 0) {
        this.$router.push({
          name: 'charge_station'
        })
      } else {
        this.$Message.warning(this.$t('8DDiBKFQZAxJ-r1n7sYoP'))
      }
    },
    selectionChangeHandler (selections) {
      console.log(selections)
      this.selections = [selections]
    },
    searchTable () {
      this.queryTable()
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize,
      search = this.stationName
    } = {}) {
      this.loading = true
      const { code, data, desc } = await getStationList({
        // pageSize,
        // current,
        search,
        operatorid: this.$store.state.user.operatorId
      })
      if (code == 200) {
        this.data = data.datalist || []
        // this.total = res.total
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    },
    changePage (num) {
      this.current = num
      this.queryTable()
    },
    changePageSize (num) {
      this.pageSize = num
      this.queryTable()
    },
    addStation () {
      this.formData = {
        name: '',
        address: '',
        consdate: '',
        tel: '',
        manager: '',
        scale: 0,
        remark: '',
        pictures: '',
        type: '',
        // 经度
        lng: 0,
        // 维度
        lat: 0,
        profitsharing: 1,
        timezone: 0,
        country: ''
      }
      this.status = 'new'
      this.formModal = true
    },
    cancel () {
      this.formModal = false
    },
    editItem (index) {
      const item = this.data[index]
      this.formData = {
        ...item
      }
      this.status = 'edit'
      this.editIndex = index
      this.formModal = true
    },
    deleteItem (index) {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: async () => {
          // this.data.splice(index, 1)
          const { code, desc } = await deleteStation({
            name: this.data[index].name
          })
          if (code == 200) {
            this.$Message.success(desc || this.$t('X3B4zUoYLLk9A5CKgzmbn'))
            this.queryTable()
          } else {
            this.$Message.error(desc)
          }
        }
      })
    },
    success (desc) {
      if (this.status === 'new') {
        this.$Message.success({
          duration: desc ? 0 : 3,
          content: desc || this.$t('Hsf3TzqX4ktuzZVNmVHMe'),
          closable: !!desc
        })
      } else {
        this.$Message.success(this.$t('rJ9uXBlTbaC-gCrMJyhCy'))
      }
      this.formModal = false
      this.queryTable()
    },
    fail (msg) {
      this.formModal = false
      this.$Message.error(msg)
    },
    close () {
      this.formModal = false
    },
    open () {
      this.formModal = true
    },
    periodElecQuery () {

    },
    pileQuery () {

    }
  }
}
</script>
